<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目翻译器 - 设置</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f8f9fa;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            text-align: center;
        }

        .header h1 {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1rem;
        }

        .content {
            padding: 2rem;
        }

        .section {
            background: white;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .section-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }

        .section-title .icon {
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }

        .form-group {
            margin-bottom: 1.2rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #555;
        }

        .form-group .description {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 0.8rem;
            line-height: 1.4;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.2s ease;
        }

        .model-selection-container {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .model-selection-container .form-control {
            min-width: 0;
        }

        .model-selection-container select.form-control {
            flex: 1;
        }

        .model-selection-container input.form-control {
            flex: 1;
        }

        @media (max-width: 768px) {
            .model-selection-container {
                flex-direction: column;
                gap: 0.8rem;
            }

            .model-selection-container select.form-control,
            .model-selection-container input.form-control {
                width: 100%;
            }
        }

        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-control.error {
            border-color: #dc3545;
        }

        select.form-control {
            cursor: pointer;
            background-color: white;
        }

        .radio-group {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .radio-option {
            display: flex;
            align-items: center;
            padding: 0.8rem 1.2rem;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex: 1;
        }

        .radio-option:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }

        .radio-option.selected {
            border-color: #667eea;
            background: #f0f4ff;
        }

        .radio-option input[type="radio"] {
            margin-right: 0.5rem;
        }

        .engine-config {
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            display: none;
        }

        .engine-config.active {
            display: block;
        }

        .password-group {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            padding: 4px;
        }

        .password-toggle:hover {
            color: #333;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5a6fd8;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #545b62;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-success:hover {
            background: #218838;
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .alert {
            padding: 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
            display: none;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert.show {
            display: block;
        }

        .test-result {
            margin-top: 0.5rem;
            padding: 0.5rem;
            border-radius: 4px;
            font-size: 0.9rem;
            display: none;
        }

        .test-result.success {
            background: #d4edda;
            color: #155724;
            display: block;
        }

        .test-result.error {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }

        .footer {
            background: #f8f9fa;
            padding: 1.5rem 2rem;
            border-top: 1px solid #e0e0e0;
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 2rem;
        }

        .tab {
            padding: 1rem 1.5rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            color: #666;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .tab:hover {
            color: #333;
            background: #f8f9fa;
        }

        .tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
            background: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        @media (max-width: 768px) {
            .content {
                padding: 1rem;
            }

            .radio-group {
                flex-direction: column;
            }

            .button-group {
                flex-direction: column;
            }

            .tabs {
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🌐 题目翻译器</h1>
            <p>Codeforces & AtCoder 问题翻译工具设置</p>
        </header>

        <div class="content">
            <div class="tabs">
                <div class="tab active" data-tab="basic">⚙️ 基本设置</div>
                <div class="tab" data-tab="engine">🔧 翻译引擎</div>
                <div class="tab" data-tab="advanced">🔌 高级选项</div>
            </div>

            <div id="alert" class="alert"></div>

            <!-- 基本设置 -->
            <div id="basic" class="tab-content active">
                <div class="section">
                    <h2 class="section-title">
                        <span class="icon">🌍</span>
                        语言设置
                    </h2>

                    <div class="form-group">
                        <label for="sourceLanguage">源语言</label>
                        <div class="description">选择要翻译的源语言，建议选择"自动检测"</div>
                        <select id="sourceLanguage" class="form-control">
                            <option value="auto">自动检测</option>
                            <option value="en">英语</option>
                            <option value="ja">日语</option>
                            <option value="ru">俄语</option>
                            <option value="zh">中文</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="targetLanguage">目标语言</label>
                        <div class="description">选择翻译目标语言</div>
                        <select id="targetLanguage" class="form-control">
                            <option value="zh-CN">简体中文</option>
                            <option value="zh-TW">繁体中文</option>
                            <option value="en">英语</option>
                        </select>
                    </div>
                </div>

                <div class="section">
                    <h2 class="section-title">
                        <span class="icon">🎨</span>
                        显示设置
                    </h2>

                    <div class="form-group">
                        <label for="displayMode">显示模式</label>
                        <div class="description">选择翻译结果的显示方式</div>
                        <select id="displayMode" class="form-control">
                            <option value="below">原文在上，译文在下</option>
                            <option value="side">左右对比显示</option>
                            <option value="replace">替换原文</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="autoTranslate">自动翻译</label>
                        <div class="description">页面加载时自动翻译（会消耗更多 API 配额）</div>
                        <select id="autoTranslate" class="form-control">
                            <option value="false">手动翻译</option>
                            <option value="true">自动翻译</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 翻译引擎设置 -->
            <div id="engine" class="tab-content">
                <div class="section">
                    <h2 class="section-title">
                        <span class="icon">🔧</span>
                        翻译引擎选择
                    </h2>

                    <div class="form-group">
                        <label>选择翻译引擎</label>
                        <div class="description">不同的翻译引擎有不同的特点和费用</div>
                        <div class="radio-group">
                            <label class="radio-option">
                                <input type="radio" name="translationEngine" value="openai">
                                <div>
                                    <strong>OpenAI</strong>
                                    <div style="font-size: 0.8rem; color: #666; margin-top: 0.2rem;">高质量翻译，支持技术术语</div>
                                </div>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="translationEngine" value="youdao">
                                <div>
                                    <strong>有道翻译</strong>
                                    <div style="font-size: 0.8rem; color: #666; margin-top: 0.2rem;">稳定可靠，速度快</div>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- OpenAI 配置 -->
                    <div id="openaiConfig" class="engine-config">
                        <h3 style="margin-bottom: 1rem; color: #2c3e50;">OpenAI 配置</h3>

                        <div class="form-group">
                            <label for="openaiApiKey">API Key</label>
                            <div class="description">从 OpenAI 官网获取的 API Key</div>
                            <div class="password-group">
                                <input type="password" id="openaiApiKey" class="form-control" placeholder="sk-...">
                                <button type="button" class="password-toggle" data-field="openaiApiKey">👁️</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="openaiBaseUrl">Base URL (可选)</label>
                            <div class="description">自定义 API 端点，用于代理或其他兼容服务</div>
                            <input type="url" id="openaiBaseUrl" class="form-control" placeholder="https://api.openai.com/v1">
                        </div>

                        <div class="form-group">
                            <label for="openaiModel">模型选择</label>
                            <div class="description">选择或输入用于翻译的模型名称</div>
                            <div class="model-selection-container">
                                <select id="openaiModelPreset" class="form-control">
                                    <option value="">自定义模型...</option>
                                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo (推荐)</option>
                                    <option value="gpt-4">GPT-4</option>
                                    <option value="gpt-4-turbo">GPT-4 Turbo</option>
                                    <option value="gpt-4o">GPT-4o</option>
                                    <option value="gpt-4o-mini">GPT-4o Mini</option>
                                    <option value="claude-3-5-sonnet-20241022">Claude 3.5 Sonnet</option>
                                    <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
                                </select>
                                <input type="text" id="openaiModel" class="form-control" placeholder="输入自定义模型名称">
                            </div>
                            <small style="color: #666;">可以从下拉菜单选择预设模型，或直接输入自定义模型名称（如：gpt-4o, claude-3-5-sonnet-20241022 等）</small>
                        </div>

                        <button type="button" class="btn btn-secondary" id="testOpenAI">测试连接</button>
                        <div id="openaiTestResult" class="test-result"></div>
                    </div>

                    <!-- 有道翻译配置 -->
                    <div id="youdaoConfig" class="engine-config">
                        <h3 style="margin-bottom: 1rem; color: #2c3e50;">有道翻译配置</h3>

                        <div class="form-group">
                            <label for="youdaoApiKey">应用 Key</label>
                            <div class="description">从有道智云控制台获取的应用 Key</div>
                            <div class="password-group">
                                <input type="password" id="youdaoApiKey" class="form-control" placeholder="输入应用 Key">
                                <button type="button" class="password-toggle" data-field="youdaoApiKey">👁️</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="youdaoAppSecret">应用密钥</label>
                            <div class="description">从有道智云控制台获取的应用密钥</div>
                            <div class="password-group">
                                <input type="password" id="youdaoAppSecret" class="form-control" placeholder="输入应用密钥">
                                <button type="button" class="password-toggle" data-field="youdaoAppSecret">👁️</button>
                            </div>
                        </div>

                        <button type="button" class="btn btn-secondary" id="testYoudao">测试连接</button>
                        <div id="youdaoTestResult" class="test-result"></div>
                    </div>
                </div>
            </div>

            <!-- 高级选项 -->
            <div id="advanced" class="tab-content">
                <div class="section">
                    <h2 class="section-title">
                        <span class="icon">🔌</span>
                        高级选项
                    </h2>

                    <div class="form-group">
                        <label for="maxTextLength">最大文本长度</label>
                        <div class="description">单次翻译的最大字符数，超过将分段处理</div>
                        <input type="number" id="maxTextLength" class="form-control" min="100" max="8000" value="2000">
                    </div>

                    <div class="form-group">
                        <label for="requestTimeout">请求超时时间 (秒)</label>
                        <div class="description">翻译请求的超时时间</div>
                        <input type="number" id="requestTimeout" class="form-control" min="10" max="120" value="30">
                    </div>

                    <div class="form-group">
                        <label for="cacheEnabled">启用缓存</label>
                        <div class="description">缓存翻译结果以减少 API 调用</div>
                        <select id="cacheEnabled" class="form-control">
                            <option value="true">启用</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="debugMode">调试模式</label>
                        <div class="description">启用详细的调试日志</div>
                        <select id="debugMode" class="form-control">
                            <option value="false">禁用</option>
                            <option value="true">启用</option>
                        </select>
                    </div>
                </div>

                <div class="section">
                    <h2 class="section-title">
                        <span class="icon">🔧</span>
                        重置选项
                    </h2>

                    <div class="form-group">
                        <div class="description">如果遇到问题，可以重置所有设置到默认状态</div>
                        <button type="button" class="btn btn-secondary" id="resetDefaults">重置为默认设置</button>
                    </div>
                </div>
            </div>

            <div class="button-group">
                <button type="button" class="btn btn-primary" id="saveSettings">保存设置</button>
                <button type="button" class="btn btn-secondary" id="exportSettings">导出设置</button>
                <button type="button" class="btn btn-secondary" id="importSettings">导入设置</button>
            </div>
        </div>

        <footer class="footer">
            <p>🌐 题目翻译器 - 支持 Codeforces & AtCoder</p>
            <p style="margin-top: 0.5rem; font-size: 0.8rem;">
                需要帮助？请访问
                <a href="#" style="color: #667eea;">使用指南</a> 或
                <a href="#" style="color: #667eea;">报告问题</a>
            </p>
        </footer>
    </div>

    <script src="options.js"></script>
</body>
</html>